<template>
  <div class="bill-detail">
    <template v-if="isDataResult">
        <!-- 房源信息 -->
        <div class="title">房源信息</div>
        <div class="form">

          <!-- 地址 -->
          <div class="form-item">
            <picker
              v-if="actionKey === 'add'"
              :range="hasRentHouseData"
              :value="hasRentHouse"
              @change="hasRentHouseChange">
              <CustomInput
                title="地址"
                placeholder="请选择房源信息"
                :value="formItem.roomAddress" />
            </picker>
            <CustomInput
              v-else
              title="地址"
              placeholder="请选择房源信息"
              :value="formItem.roomAddress" />
          </div>
          <!-- 房号 -->
          <div class="form-item">
            <picker
              v-if="actionKey === 'add'"
              :range="hasRentHouseData"
              :value="hasRentHouse"
              @change="hasRentHouseChange">
              <CustomInput
                title="房号"
                placeholder="请选择房源信息"
                :value="formItem.roomNo" />
            </picker>
            <CustomInput
              v-else
              title="房号"
              placeholder="请选择房源信息"
              :value="formItem.roomNo" />
          </div>
          <!-- 租金 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.rentMoney"
              inputType="number"
              title="租金"
              company="元"
              placeholder="请输入租金"
              :isInput="!isRead" />
          </div>
          <!-- 收租日期 -->
          <div class="form-item">
            <picker
              v-if="!isRead"
              mode="date"
              start="1900-01-01"
              end="2030-12-31"
              :value="formItem.rentDate"
              @change="rentDateChange">
              <CustomInput
                title="收租日期"
                placeholder="请选择收租日期"
                :value="formItem.rentDate" />
            </picker>
            <CustomInput
              v-else
              title="收租日期"
              placeholder="收租日期"
              :value="formItem.rentDate" />
          </div>
        </div>

        <!-- 租客信息 -->
        <div class="title">租客信息</div>
        <div class="form">
          <!-- 名称 -->
          <div class="form-item">
            <CustomInput
              title="名称"
              placeholder="请选择房源信息"
              :value="formItem.rentorName" />
          </div>
          <!-- 证件号 -->
          <div class="form-item">
            <CustomInput
              title="证件号"
              placeholder="请选择房源信息"
              :value="formItem.idcards" />
          </div>
          <!-- 联系电话 -->
          <div class="form-item">
            <CustomInput
              title="联系电话"
              placeholder="请选择房源信息"
              :value="formItem.rentorPhone" />
          </div>
        </div>

        <!-- 水费 -->
        <div class="title">水费</div>
        <div class="form">
          <!-- 水价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterPrice"
              inputType="number"
              title="水价"
              company="元/吨"
              placeholder="请输入水价"
              :isInput="!isRead" />
          </div>
          <!-- 上期水表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterPrevUsed"
              inputType="number"
              title="上期水表值"
              company="吨"
              placeholder="请输入上期水表值"
              :isInput="!isRead" />
          </div>
          <!-- 本期水表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.waterNowUsed"
              inputType="number"
              title="本期水表值"
              company="吨"
              placeholder="请输入本期水表值"
              :isInput="!isRead" />
          </div>
        </div>

        <!-- 电费 -->
        <div class="title">电费</div>
        <div class="form">
          <!-- 电价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricPrice"
              inputType="number"
              title="电价"
              company="元/度"
              placeholder="请输入电价"
              :isInput="!isRead" />
          </div>
          <!-- 上期电表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricPrevUsed"
              inputType="number"
              title="上期电表值"
              company="度"
              placeholder="请输入上期电表值"
              :isInput="!isRead" />
          </div>
          <!-- 本期电表值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.electricNowUsed"
              inputType="number"
              title="本期电表值"
              company="度"
              placeholder="请输入本期电表值"
              :isInput="!isRead" />
          </div>
        </div>

        <!-- 燃气费 -->
        <div class="title">燃气费</div>
        <div class="form">
          <!-- 燃气价 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasPrice"
              inputType="number"
              title="燃气价"
              company="元/方"
              placeholder="请输入燃气价"
              :isInput="!isRead" />
          </div>
          <!-- 上期燃气值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasPrevUsed"
              inputType="number"
              title="上期燃气值"
              company="方"
              placeholder="请输入上期燃气值"
              :isInput="!isRead" />
          </div>
          <!-- 本期燃气值 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.gasNowUsed"
              inputType="number"
              title="本期燃气值"
              company="方"
              placeholder="请输入本期燃气值"
              :isInput="!isRead" />
          </div>
        </div>

        <!-- 费用详情 -->
        <div class="title">费用详情</div>
        <div class="form">
          <!-- 管理费 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.manageMoney"
              inputType="number"
              title="管理费"
              placeholder="请输入管理费"
              :isInput="!isRead" />
          </div>
          <!-- 卫生费 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.hygieneMoney"
              inputType="number"
              title="卫生费"
              placeholder="请输入卫生费"
              :isInput="!isRead" />
          </div>
          <!-- 网费 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.netMoney"
              inputType="number"
              title="网费"
              placeholder="请输入网费"
              :isInput="!isRead" />
          </div>
          <!-- 电视费 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.tvMoney"
              inputType="number"
              title="电视费"
              placeholder="请输入电视费"
              :isInput="!isRead" />
          </div>
          <!-- 电梯费 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.giftMoney"
              inputType="number"
              title="电梯费"
              placeholder="请输入电梯费"
              :isInput="!isRead" />
          </div>
          <!-- 其他 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.otherMoney"
              inputType="number"
              title="其他"
              placeholder="请输入其他"
              :isInput="!isRead" />
          </div>
        </div>

        <!-- 综合 -->
        <div class="title">综合</div>
        <div class="form">
          <template v-if="type === '1'">
            <div class="form-item">
              <CustomInput
                v-model="formItem.realTotalMoney"
                inputType="number"
                title="实收金额"
                placeholder="请填写实收金额"
                :isInput="!isRead" />
            </div>

            <div class="form-item">
              <picker
                v-if="!isRead"
                :range="moneyTypeData"
                :value="moneyType"
                @change="moneyTypeChange">
                <CustomInput
                  title="支付方式"
                  placeholder="请选择支付方式"
                  :isInput="false"
                  :value="formItem.getMoneyType" />
              </picker>
              <CustomInput
                v-else
                title="支付方式"
                placeholder="支付方式"
                :value="formItem.getMoneyType" />
            </div>
          </template>
          <template v-if="isRead">
            <div class="form-item">
              <CustomInput
                v-model="formItem.commMoney"
                title="固费"
                placeholder="固费" />
            </div>
            <div class="form-item">
              <CustomInput
                v-model="formItem.mustMoney"
                title="应付"
                placeholder="应付" />
            </div>
          </template>
          <!-- 备注 -->
          <div class="form-item">
            <CustomInput
              v-model="formItem.remark"
              title="备注"
              placeholder="请输入备注"
              :isInput="!isRead" />
          </div>
        </div>

        <!-- 保存按钮 -->
        <div v-if="!isRead" class="action">
          <i-button type="primary" @click="actionClick">保存</i-button>
        </div>
    </template>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { saveData, saveFinishData, getHasRentHouse } from 'api/billDetail'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    isRead () {
      return this.actionKey === 'read'
    },
    hasRentHouseData () {
      if (this.hasRentHouseAllData.length === 0) {
        return []
      }

      const arr = []

      this.hasRentHouseAllData.map(item => {
        arr.push(item.roomNo)
      })

      return arr
    },
    ...mapState({
      type: state => state.billDetail.type,
      currentItem: state => state.billDetail.currentItem,
      actionKey: state => state.billDetail.actionKey
    })
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      isDataResult: false,
      formItem: {},
      hasRentHouse: 0,
      hasRentHouseAllData: [],
      moneyType: '0',
      moneyTypeData: ['现金', '银行卡转账', '微信支付', '支付宝支付']
    }
  },
  methods: {
    async initData () {
      await this.getListData()

      if (this.actionKey === 'edit' || this.actionKey === 'read') {
        this.formItem = JSON.parse(JSON.stringify(this.currentItem))

        this.hasRentHouse = this.hasRentHouseData.findIndex(item => item === this.formItem.roomNo)
      } else {
        this.hasRentHouse = 0

        this.formItem = {
          roomAddress: '',
          roomNo: '',
          rentDate: '',
          rentMoney: 0,
          rentorName: '',
          idcards: '',
          rentorPhone: '',
          waterPrice: 0,
          waterPrevUsed: 0,
          waterNowUsed: 0,
          electricPrice: 0,
          electricPrevUsed: 0,
          electricNowUsed: 0,
          gasPrice: 0,
          gasPrevUsed: 0,
          gasNowUsed: 0,
          manageMoney: 0,
          hygieneMoney: 0,
          netMoney: 0,
          tvMoney: 0,
          giftMoney: 0,
          otherMoney: 0,
          getMoneyType: '',
          getMoneyDate: '',
          remark: ''
        }
      }
    },
    actionClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))

      this.deleteCustomKey(obj)

      if (obj.createDt !== undefined) {
        delete obj.createDt
      }
      if (obj.getMoneyDate !== undefined) {
        delete obj.getMoneyDate
      }

      if (this.type === '0') {
        if (obj.getMoneyType !== undefined) {
          delete obj.getMoneyType
        }

        this.saveData(obj)
      } else {
        this.saveFinishData(obj)
      }
    },
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    rentorNameChange (e) {
      this.rentorName = e.target.value
      this.formItem.rentorName = this.rentorNameData[this.rentorName]
      this.formItem.rentorId = this.rentorNameAllData[this.rentorName].id
      this.formItem.idcards = this.rentorNameAllData[this.rentorName].idcards
      this.formItem.rentorPhone = this.rentorNameAllData[this.rentorName].rentorPhone
    },
    rentDateChange (e) {
      this.formItem.rentDate = e.target.value
    },
    hasRentHouseChange (e) {
      this.hasRentHouse = e.target.value
      const data = this.hasRentHouseAllData[this.hasRentHouse]
      this.formItem.roomNo = data.roomNo
      this.formItem.roomAddress = data.roomAddress
      this.formItem.rentorName = data.rentorName
      this.formItem.idcards = data.idcards
      this.formItem.rentorPhone = data.rentorPhone
    },
    getListData () {
      return new Promise(async (resolve, reject) => {
        this.isDataResult = false
        this.$showLoading('加载中')

        const res = await getHasRentHouse()

        this.isDataResult = true
        this.$hideLoading()

        if (res.code === ERR_OK) {
          this.hasRentHouseAllData = res.rows
        }

        resolve()
      })
    },
    async saveFinishData (data) {
      this.$showLoading('保存中')

      const res = await saveFinishData(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '保存成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '保存失败',
          icon: 'none'
        })
      }
    },
    async saveData (data) {
      this.$showLoading('保存中')

      const res = await saveData(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '保存成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bill-detail {
    width: 100%;
    overflow-x: hidden;
    > .title {
      width: 100%;
      line-height: 40px;
      background-color: rgb(248, 248, 248);
      font-size: 14px;
      padding-left: 10px;
    }
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
  }
</style>
